webpack打包js

webpack打包的两种方式

1. webpack entry<entry> output （命令行）
2. webpack -config webpack.conf.js (指定webpack的配置文件)

使用命令行打包js

一：创建两个js文件

创建app.js, sum.js，sum.js导出一个加法的函数，app.js使用这个函数。

// app.js

import {sum} from './sum';
console.log('sum(21, 22)', sum(21, 22));

// sum.js
export function sum(a, b) {
    return a + b;
}

二：使用webpack命令打包

在当前目录下使用： webpack app.js bundle.js ; 这里入口是app.js, 输出文件是bundle.js，这样就会看到文件中多出一个bundle.js文件。

创建一个html文件运行，引入bundle.js运行，控制台会打印：sum(21, 22) 43 。

使用webapck的配置文件打包（还是上面的两个js文件）

1. 创建一个webpack.conf.js，编写wepack的配置文件

// 配置文件使用commonjs规范

module.exports = {

    // 入口，是一个对象
    entry: {
        app: './app.js'
    },

    // 输出
    output: {
        // 带五位hash值的js
        filename: '[name].[hash:5].js'
    }
}

1. 在命令行输入：webpack --config webpack.conf.js，发现生成了一个app.dd1c6.js带hash的js文件。将这个js文件引入HTML里面发正常输出：sum(21, 22) 43
2. 配置文件的命名为webpack.config.js，则直接在命令行输入webpack就可以。

webapck配合babel打包ES6、7

在项目根目录安装bable-loader和babel-core，babel-preset

1. 使用npm init生成一个配置文件
2. npm install babel-loader babel-core --save-dev
3. 新建app.js，index.html，webpack.config.js等文件
4. 编写webpack.config.js
5. 安装babel-preset来指定编译的版本：npm install babel-preset-env --save-dev
6. 在app.js里面随便写一些ES6的语法
7. 使用命令行输入webpack进行编译

webpack配置文件

// 配置文件使用commonjs规范

module.exports = {

    // 入口，是一个对象
    entry: {
        app: './app.js' // 相对路径
    },

    // 输出
    output: {
        // 带五位hash值的js
        filename: '[name].[hash:8].js'
    },

    // 指定loader
    module: {

        // rules中的每一项是一个规则
        rules:[
            {
                test: /\.js$/, // 值一个正则，符合这些正则的资源会用一个loade来处理
                use: {
                   loader: 'babel-loader', // 使用bable-loader来处理
                   options: {  // 指定参数
                        presets: [
                            ['babel-preset-env', {
                                targets: {
                                    browsers: ['> 1%', 'last 2 version'] //具体可以去babel-preset里面查看
                                } 
                            }]
                            
                        ] // 指定哪些语法编译
                   }
                },
                exclude: '/node_module/' // 排除在外
            }
        ]
    }
}

app.js和编译之后带hash的js

// app.js
let func = () => {};
const num = 30;
let arr = [3, 4, 5, 6];

let newArr = arr.map(item => item * 2); // 将以前数组每一项*2

console.log(newArr);



// ==================//
// 编译之后（直接截取了编译的代码）
"use strict";


var func = function func() {};
var num = 30;
var arr = [3, 4, 5, 6];

var newArr = arr.map(function (item) {
  return item * 2;
}); // 将以前数组每一项*2

console.log(newArr);

babel的两个插件：Babel Polyfill 和 Babel Runtime Transform

用来处理一些函数和方法（Genertor,Set,Map,Array.from等未被babel处理，需要上面的两个插件）

1. Babel Polyfill（全局垫片），npm install babel-polyfill --save, 使用：import "babel-polyfill";
2. Babel Runtime Transform（为开发框架准备），npm install babel-plugin-transform-runtime --save, npm install babel-runtime --save
3. 新建一个.babelrc来进行配置

app.js里面新增代码

import "babel-polyfill";
let func = () => {};
const num = 30;  
let arr = [3, 4, 5, 6];

let newArr = arr.map(item => item * 2); // 将以前数组每一项*2

console.log(newArr);


// 需要babel-polyfill
arr.includes(8);

// Genertor 函数
function* func2() {

}

webpack配置

// 配置文件使用commonjs规范

module.exports = {

    // 入口，是一个对象
    entry: {
        app: './app.js' // 相对路径
    },

    // 输出
    output: {
        // 带五位hash值的js
        filename: '[name].[hash:8].js'
    },

    // 指定loader
    module: {

        // rules中的每一项是一个规则
        rules:[
            {
                test: /\.js$/, // 值一个正则，符合这些正则的资源会用一个loade来处理
                use: {
                   loader: 'babel-loader', // 使用bable-loader来处理
                   options: {  // 指定参数
                        
                   }
                },
                exclude: '/node_module/' // 排除在外
            }
        ]
    }
}

.babelrc文件配置

{
    "presets": [
        ["babel-preset-env", {
            "targets": {
                "browsers": ["> 1%", "last 2 version"]
            } 
        }] 
    ],
    "plugins": ["transform-runtime"]
}